<template>
    <div class="main">
        <div class="form">
            <div class="login">
                <h1>欢迎登录</h1>
                <el-form ref="ruleFormRef" style="max-width: 360px" :model="ruleForm" :rules="rules" status-icon>
                    <el-form-item  prop="name">
                        <el-input v-model="ruleForm.name" >
                            <template #prefix>
                                <el-icon><User /></el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item  prop="pass">
                        <el-input v-model="ruleForm.pass" >
                            <template #prefix>
                                <el-icon><Lock /></el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-button type="primary" @click="clickBtn">
                        登录
                    </el-button>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { valueEquals, type FormInstance, type FormRules } from "element-plus";
import { useRouter, useRoute } from "vue-router";

const router = useRouter()
interface RuleForm {
    name: string;
    pass: string
}


const formSize = ref("default");

const ruleFormRef = ref<FormInstance>();

const ruleForm = reactive<RuleForm>({
    name: "admin",
    pass: ""
});

const CheckName= (rule: any, value: any, callback: any) => {
//   ！取反   如果输入的年龄不存在， 那么就返回回调方法传递一个报错对象及报错提示信息
    if (!value) {
        // Error 报错异常
    return callback(new Error("请输入用户名"));
  }
}

const validatePass = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入密码"));
  } else {
    if (ruleForm.pass !== "") {
      if (!ruleFormRef.value) return;
      ruleFormRef.value.validateField("pass", () => null);
    }
    //成功的回调
    callback();
  }
};

const rules = reactive<FormRules<RuleForm>>({
    name: [
        { required: true,  validator: CheckName,message: "请输入用户名", trigger: "blur" },
        { min: 3, max: 6, message: " 请输入3-5个字符的长度", trigger: "blur" },
    ],
    pass: [
        { required: true,validator:validatePass, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 18, message: '请输入6-18位包含数字、字母(大小写、特殊字符)', trigger: 'blur' }
    ]
});

// const rules = reactive<FormRules<RuleForm>>({
//     name: [
//         { required: true, message: "请输入用户名", trigger: "blur" },
//         { min: 3, max: 6, message: " 请输入3-5个字符的长度", trigger: "blur" },
//     ],
//     pass: [
//         { required: true, message: '请输入密码', trigger: 'blur' },
//         { min: 6, max: 18, message: '请输入6-18位包含数字、字母(大小写、特殊字符)', trigger: 'blur' }
//     ]
// });

const regLet = ref(/[a-zA-Z0-9]+/)
function clickBtn() {
    if (!/^[\u4e00-\u9fa5_a-zA-Z0-9]+$/.test(ruleForm.pass)) {
        if (regLet.value.test(ruleForm.pass)) {
            router.push({ path: "/" });//跳转首页
        } else {
            alert('请输入含有字母、数字和特殊符号的密码')
        }
    } else {
        alert('请输入含有字母、数字和特殊符号的密码')
    }
}
</script>

<style scoped lang="less">
.main {
    width: 100%;
    height: 100%;
    background-color: #4e77eb;
    position: fixed;
}

.form {
    width: 1329px;
    height: 638px;
    margin:150px auto;
    background: url(../assets/img/112.png);
    padding:200px 170px 91px 815px;
}
.login{
    width:339px;
    height: 340px;
    background-color: white;
    h1{
        width: 140px;
        height: 50px;
        text-align: center;
        border-bottom:3px solid  #6e84eb;
        margin-left: 100px;
        margin-bottom: 40px;
    }
    .el-button{
        width: 245px;
        height: 45px;
        margin:40px 50px;
    }
}
</style>